<template>
  <div class="footer">
    <div @click="changTab(0)" class="item">
      <img src="../assets/images/tab/tab/home_a.png" alt="" v-if="selIndex === 0">
      <img src="../assets/images/tab/tab/home.png" alt="" v-else>
      <p :class="selIndex === 0 ? 'sel' : ''" class="text" >首 页</p>
    </div>
    <div @click="changTab(1)" class="item ">
      <img src="../assets/images/tab/tab/danju_a.png" alt="" v-if="selIndex === 1">
      <img src="../assets/images/tab/tab/danju.png" alt="" v-else>
      <p :class="selIndex === 1 ? 'sel' : ''" class="text">业务单据</p>
    </div>
    <div @click="changTab(2)" class="item">
      <img src="../assets/images/tab/tab/cha_a.png" alt="" v-if="selIndex === 2">
      <img src="../assets/images/tab/tab/cha.png" alt="" v-else>
      <p :class="selIndex === 2 ? 'sel' : ''" class="text">查询分析</p>
    </div>
    <div @click="changTab(3)" class="item ">
      <img src="../assets/images/tab/tab/my_a.png" alt="" v-if="selIndex === 3">
      <img src="../assets/images/tab/tab/my.png" alt="" v-else>
      <p :class="selIndex === 3 ? 'sel' : ''" class="text">我 的</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selIndex: -1,
      routerList: ["/",'/bill', "/query","/me"],
    };
  },
  mounted() {
    this.selIndex = this.routerList.findIndex(
      (item) => item === this.$route.path
    );
  },
  methods: {
    changTab(index) {
      this.selIndex = index;
      this.$router.push(this.routerList[index]);
    },
  },
  computed: {},
};
</script>
<style scoped lang="stylus">
@import "../common/stylus/variable.styl"
.footer
  width: 100%;
  height: 49px;
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: rgba(255, 255, 255, 1);
  border-top: 1px solid #E2E2E2;

  .item
    text-align center

    img
      margin-bottom 2px
      width: 20px;
      height: 20px;

    .icon-footer
      width: 40px;
      height: 40px;

    .text
      font-size: 12px;
      font-weight: 500;
      color: rgba(52, 52, 52, 1);
      line-height: 14px;
      z-index 2;
      color $color-font-default
    .sel
      color #198AFF
</style>
